<template>
	<div class="guessLike">
		<div class="author">猜你喜欢</div>
		<div
			class="like"
			v-for="item in LikeList?.albums"
			:key="item.albumId"
			@click="toDetail(item.albumId)">
			<van-row class="LikeList">
				<van-col span="4" class="authorInfo1">
					<van-image :src="imageUrl + item.albumCoverPath"></van-image>
				</van-col>
				<van-col span="20" class="authorInfo2">
					<div class="authorName">
						{{ item.albumTitle }}
					</div>
					<div class="authorIntro">{{ item.intro }}</div>

					<div class="subscribeCount">
						<div class="icon1">
							<van-icon name="play-circle-o" />
							<span>{{ item.albumPlayCount }}万</span>
						</div>
						<div>
							<van-icon name="bar-chart-o" />
							<span>{{ item.albumTrackCount }}</span>
						</div>
					</div>
				</van-col>
			</van-row>
		</div>

		<!-- 查看更多 -->
		<div class="watchMore">
			<span @click="toMore">查看更多</span>
			<van-icon name="arrow" />
		</div>
	</div>
</template>

<script setup lang="ts">
import type { LikeListDataModel } from "@/api/CourseDetail";
import router from "@/router";
let imageUrl = "https://imagev2.xmcdn.com/";
defineProps<{
	LikeList: LikeListDataModel | undefined;
}>();

const toMore = () => {
	router.push(`/download`)
}
</script>

<style lang="less" scoped>
.guessLike {
	padding: 15px 0 0 15px;

	.author {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.LikeList {
		padding: 15px 10px 15px 0;

		.authorInfo2 {
			padding: 0 20px 0 10px;

			.authorName {
				font-size: 16px;
				color: #333;
				margin-bottom: 2px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.authorIntro {
				font-size: 12px;
				color: #333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.subscribeCount {
				font-size: 12px;
				color: #bbb;
				padding-top: 5px;
				display: flex;

				.icon1 {
					margin-right: 6px;
				}
			}
		}
	}

	.watchMore {
		margin: 10px 0 15px;
		padding: 17px 0;
		font-size: 16px;
		color: #f86442;
		font-weight: bold;
		text-align: center;
	}
}
</style>
